<template>
  <BorderBox11 :title="props.tablesTitle+' '+$t('ems.duration')">
    <div class="div-content">
      <div class="div-chart">
        <v-chart ref="mychart" :option="options"></v-chart>
        <!--<el-empty :description="$t('mes.noDataYet')" v-else/>-->
      </div>
    </div>
  </BorderBox11>
</template>

<script setup>
import { defineProps, onMounted, reactive, ref, watch } from 'vue'
import { BorderBox11 } from 'datav-vue3'
import useI18n from '@/hooks/language'

const { t } = useI18n()
const mychart = ref(null)
const options = ref(null)
const data = reactive({
  shows: false
})
const props = defineProps({
  runningTime: { type: Array },
  runningTime2: { type: Array },
  colorList: { type: Array },
  tablesTitle: { type: String }
})

watch(() => [props.runningTime, props.runningTime2, props.colorList, props.tablesTitle], () => {
  if (props.runningTime.length > 0) {
    data.shows = true
  } else {
    data.shows = false
  }
  mychart.value.setOption(barsOptions())
})

onMounted(() => {
})

const barsOptions = () => {
  return {
    title: {
      text: data.shows ? '' : t('mes.noDataYet'),
      x: 'center',
      y: 'center',
      textStyle: {
        fontSize: 13,
        color: '#ffffff'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      backgroundColor: '#fff', // 悬浮框背景色
      borderColor: '#000', // 悬浮框边框颜色
      borderWidth: 1, // 悬浮框边框宽度
      textStyle: { // 悬浮框文字样式
        color: '#000',
        fontSize: 13
      }
    },
    grid: {
      left: '5%',
      right: 0,
      bottom: 0,
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      axisLabel: {
        show: true,
        interval: 0, // 隔几项显示一个标签
        rotate: '55', // 标签倾斜的角度，旋转的角度是-90到90度
        textStyle: {
          fontSize: 13,
          color: '#ffffff'
        },
        padding: [20, 0, 2, 0]
      },
      data: props.runningTime
    }],
    yAxis: [{
      name: '单位（小时）',
      nameTextStyle: {
        color: '#ffffff'
      },
      type: 'value',
      axisLabel: {
        textStyle: {
          fontSize: 14,
          color: '#ffffff'
        }
      }
    }],
    series: [
      {
        // name: 'TH',
        type: 'bar',
        data: props.runningTime2,
        barWidth: props.runningTime2.length > 1 ? '' : '30%',
        label: {
          normal: {
            show: true, // 开启显示
            position: 'top ', // 柱形上方
            rotate: 0, // 倾斜角度
            textStyle: { // 数值样式
              color: '#fff',
              fontSize: 13
            }
          }
        },
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(111, 162, 135, 0.2)'
        },
        itemStyle: {
          normal: {
            // 这里是颜色
            color: function (params) {
              // 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
              var colorList = props.colorList
              return colorList[params.dataIndex]
            }
          }
        }
      }
    ]
  }
}
</script>

<style scoped lang="scss">
.div-content {
  height: 100%;
  width: 100%;
  text-indent: 0px;
  font-weight: normal;
  font-size: 18px;
  line-height: 40px;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  padding: 20px 15px 20px 15px;

  .p-title {
    background-image: url('@/assets/images/title.png');
    background-size: 100%;
    color: #fff;
    text-align: center;
    height: 10%;
  }

  .div-chart {
    height: 100%;
    width: 100%;
  }
}

</style>
